<template>
  <div class='pwoer-container'>
      <a-row class='pwoer-header' :style='"height:" + headerHeight' type="flex" justify="space-between" >
        <a-col class='title' :lg="24" :md="24" :xxl="24" :xl="24">
        暖通系统累计热量
        </a-col>
        <a-col class='query' :lg="24" :md="24" :xxl="24" :xl="24">
        <a-radio-group v-model='queryParam.type' default-value='day' button-style='solid'>
          <a-radio-button value='day'>
            日累计
          </a-radio-button>
          <a-radio-button value='month'>
            月累计
          </a-radio-button>
          <a-radio-button value='year'>
            年度累计
          </a-radio-button>
        </a-radio-group>
        </a-col>
      </a-row>
    <bar :loading='loading' id='HVAC-container1' v-show='xData.length' :height='`calc(100% - ${headerHeight})`'
         :xData='xData'
         multiple
         :legend-pos='"bottom"'
         unit='kWh'
         :x-axis-config='{axisLabel: { interval: 0, rotate: 50 }}'
         :legendList='legendList'
         :yData='yData' />
    <a-empty style='height: 80%' v-show='!xData.length'></a-empty>
  </div>
</template>

<script>
import Bar from '@/business-components/charts/bar.vue'
import moment from 'moment/moment'

export default {
  components: {
    Bar
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      options: {},
      xData: [],
      headerHeight: '80px',
      queryParam: {
        type: 'day'
      },
      loading: false,
      legendList: [
        {
          name: '风电系统'
        },
        {
          name: '光伏系统'
        },
        {
          name: '配网系统'
        },
        {
          name: '储能系统'
        }
      ],
      yData: []
    }
  },
  watch: {
    'queryParam.type': function() {
      this.getData()
    },
    data(val) {
      this.loading = true
      setTimeout(() => {
        if (val) {
          const tempMap = new Map()
          for (let i = 0; i < val.length; i++) {
            tempMap.set(val[i].group_name, tempMap.get(val[i].group_name) ? [...tempMap.get(val[i].group_name), val[i].total] : [val[i].total])
          }
          this.legendList = [...tempMap.keys()].map(item => ({ name: item }))
          this.yData = [...tempMap.values()]
          if(this.queryParam.type === 'day'){
            this.xData = [...new Set(val.map(item => moment(item.date).format('MM-DD')))]
          }else{
            this.xData = [...new Set(val.map(item => item.date))]
          }
        }
        this.loading = false
      }, 200)
    }
  },
  methods: {
    moment,
    getData() {
      this.loading = true
      setTimeout(() => {
        this.$emit('getData', this.queryParam.type)
        this.loading = false
      })
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<style lang='less' scoped>
.pwoer-container {
  width: 100%;
  height: 100%;

  .pwoer-header {
    display: flex;
    justify-content: space-between;

    .title {
      font-size: 16px;
      font-weight: 800;
      color: #1A1A1A;
      text-align: center;
    }

    .query {
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
